<template>
  <div class="associate">
    <div v-if="selected" class="box" @click="handleSetting">
      <span class="name">{{ selected[name] }}</span>
      <span class="icon"></span>
    </div>
    <template v-else>
      <div class="btnArea">
        <span class="searchBtn"></span>
        <span class="settingBtn" @click="handleSetting"></span>
      </div>
      <a-input v-model:value="searchValue" placeholder="请输入或者选择摄像头名称"></a-input>
      <ul class="panel" v-if="searchValue && items.length">
        <li v-for="item in items" :key="item[id]" @click="() => handleSelected(item)">
          {{ item[name] }}
          <span class="name" v-if="searchValue && item[name].indexOf(searchValue) != -1">
            {{ item[name].substr(0, item[name].indexOf(searchValue)) }}<span style="color: #f50">{{ searchValue }}</span
            >{{ item[name].substr(item[name].indexOf(searchValue) + searchValue.length) }}
          </span>
          <span class="name" v-else>{{ item[name] }}</span>
        </li>
      </ul>
    </template>
  </div>
</template>

<script setup name="associate">
  import bus from '@/utils/mitt';
  import { ref, watch } from 'vue';
  const props = defineProps(['data', 'nodeIndex', 'treeData', 'id', 'name']);
  const searchValue = ref('');
  const items = ref([]);
  const selected = ref(null);

  /** 监听输入框内容的变化 */
  watch(
    () => searchValue.value,
    (newValue, oldValue) => {
      const result = props.treeData
        .map(item => {
          if (item[props.name].indexOf(searchValue.value) != -1) {
            return item;
          }
          return null;
        })
        .filter((item, i, self) => item && self.indexOf(item) === i);
      items.value = result;
    }
  );
  const handleSelected = item => {
    selected.value = item;
    props.data['nodeDeviceId'] = item[props.id];
    props.data[props.name] = item[props.name];
  };
  const handleSetting = () => {
    bus.emit('showTree', props.nodeIndex);
  };
  /** 监听从tree组件选中的数据 */
  bus.on(`selected-${props.nodeIndex}`, item => {
    selected.value = item;
    props.data['nodeDeviceId'] = item[props.id];
    props.data[props.name] = item[props.name];
  });
</script>

<style lang="less" scoped>
  .associate {
    position: relative;
    .box {
      height: 20px;
      line-height: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      .name {
        flex: 1;
      }
      .icon {
        width: 6px;
        height: 10px;
        background-image: url(@/assets/image/arrows.png);
        background-size: 100%;
      }
    }
    .btnArea {
      padding-right: 10px;
      display: flex;
      height: 32px;
      align-items: center;
      position: absolute;
      z-index: 1;
      top: 0;
      right: 0;
    }
    .searchBtn {
      background-image: url(@/assets/image/search.png);
      width: 16px;
      height: 16px;
      background-size: 100% 100%;
      margin-right: 8px;
      cursor: pointer;
    }
    .settingBtn {
      background-image: url(@/assets/image/setting.png);
      width: 16px;
      height: 16px;
      background-size: 100% 100%;
      cursor: pointer;
    }
    :deep(.ant-input) {
      padding-right: 56px;
    }
    .panel {
      position: absolute;
      width: 100%;
      background: #fff;

      border: 1px solid #d9d9d9;
      top: 31px;
      z-index: 1;
      li {
        line-height: 30px;
        padding: 0 12px;
        cursor: pointer;
        &:hover {
          background-color: #92aafb;
          color: #fff;
        }
      }
    }
  }
</style>
